<template>
  <div>
      <h2>欢迎来到商品信息管理页面！</h2>
        <!--导航条-->
        <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                 background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
            <el-menu-item index="1">处理中心</el-menu-item>
            <el-submenu index="2">
                <template slot="title">我的工作台</template>
                <el-menu-item index="2-1">选项1</el-menu-item>
                <el-menu-item index="2-2">选项2</el-menu-item>
                <el-menu-item index="2-3">选项3</el-menu-item>
            </el-submenu>
            <el-menu-item index="3"><a href="https://www.ele.me" target="_blank">关于我们</a></el-menu-item>
        </el-menu>
        <br>
        <!--搜索框-->
        <el-row>
            <el-col :span="3" class="grid">
                <el-input v-model="input" placeholder="请输入内容" size="mini"></el-input>
            </el-col>
            <el-col :span="1" class="grid">
                <el-button type="success" icon="el-icon-search" size="mini">搜索</el-button>
            </el-col>
        </el-row>
        <br>
        <!--表格数据及操作-->
        <el-table :data="goodses" border style="width: 100%" stripe ref="multipleTable" tooltip-effect="dark">
            <!--勾选框-->
            <el-table-column type="selection" width="55">
            </el-table-column>
            <!--索引-->
            <el-table-column type="index" :index="indexMethod" >
            </el-table-column>
            <el-table-column prop="id" label="商品编号" width="180" sortable>
            </el-table-column>
            <el-table-column prop="name" label="商品名称" width="180">
            </el-table-column>
            <el-table-column prop="price" label="商品价格" width="180">
            </el-table-column>
              <el-table-column prop="fase" label="商品库存" width="180">
            </el-table-column>
            <el-table-column label="编辑" width="100">
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" size="mini"  @click="edi(scope.$index)">编辑</el-button>
                </template>
            </el-table-column>
            <el-table-column label="删除" width="100">
                <template slot-scope="scope">
                    <el-button type="danger" icon="el-icon-delete" size="mini" @click="del(scope.$index)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <br>
        <!--新增按钮-->
        <el-col :span="1" class="grid">
            <el-button type="success" icon="el-icon-circle-plus-outline" size="mini" round @click="add()">新增</el-button>
        </el-col>
        <!--全删按钮-->
        <el-col :span="1" class="grid">
            <el-button type="danger" icon="el-icon-delete" size="mini" round @click="qdel()">全删</el-button>
        </el-col>
        <br>
        <!--分页条-->
        
        <el-pagination background layout="prev, pager, next" :total="goodses.legend" :page-size="pageSize" @size-charge="sizeChange()"  @current-charge="">
            
        </el-pagination>
        <!-- //新增学生信息模态框 -->
<el-dialog title="新增商品" :visible="addGoodsForm" size="tiny" :modal-append-to-body='false' @close='closeDialog'>
  <el-form id="#addgForm" ref="addsForm" :model="addgForm" label-width="80px">
    <el-form-item label="商品编号" prop="id">
      <el-input  v-model="addgForm.id" max-length="10"></el-input>
    </el-form-item>
    <el-form-item label="商品名称" prop="name">
      <el-input v-model="addgForm.name"></el-input>
    </el-form-item>
    <el-form-item label="商品价格" prop="price">
      <el-input v-model="addgForm.price"></el-input>
    </el-form-item>
    <el-form-item label="库存" prop="fase">
      <el-input v-model="addgForm.fase"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="goodseAdd()">确定</el-button>
      <el-button @click="addGoodsForm = false;canceladdT('formt')">取消</el-button>
    </el-form-item>
  </el-form>
</el-dialog>
<!-- //编辑学生信息模态框 -->
<!-- <el-dialog title="编辑商品" :visible="editstudentForm" size="tiny" :modal-append-to-body='false' @close='closeDialog'>
  <el-form  id="#addsForm" ref="editsForm" :model="editsForm" label-width="80px">
    <el-form-item label="商品编号">
      <el-input  v-model="editgForm.id" max-length="10" disabled="disabled"></el-input>
    </el-form-item>
    <el-form-item label="商品名称">
      <el-input v-model="editgForm.name"></el-input>
    </el-form-item>
    <el-form-item label="商品价格">
      <el-input v-model="editgForm.price"></el-input>
    </el-form-item>
    <el-form-item label="库存">
      <el-input v-model="editgForm.fase"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="goodsEdit()">确定</el-button>
      <el-button @click="editstudentForm = false">取消</el-button>
    </el-form-item>
  </el-form>
</el-dialog>-->
<el-dialog title="编辑商品" :visible="editGoodsForm" size="tiny" :modal-append-to-body='false' @close='closeDialog'>
  <el-form id="#editgForm" ref="editgForm" :model="addgForm" label-width="80px">
    <el-form-item label="商品编号" prop="id">
      <el-input  v-model="editgForm.id" max-length="10"></el-input>
    </el-form-item>
    <el-form-item label="商品名称" prop="name">
      <el-input v-model="editgForm.name"></el-input>
    </el-form-item>
    <el-form-item label="商品价格" prop="price">
      <el-input v-model="editgForm.price"></el-input>
    </el-form-item>
    <el-form-item label="库存" prop="fase">
      <el-input v-model="editgForm.fase"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="goodseEdit()">确定</el-button>
      <el-button @click="editGoodsForm = false;canceladdT('formt')">取消</el-button>
    </el-form-item>
  </el-form>
</el-dialog>
  </div>
</template> 


<script>

export default {
    name:'GoodsManger',
     data() {
            return {
                //表格数据
                goodses: [{
                    id: '01',
                    name: '苹果8',
                    price: '2888',
                    fase:10
                }, {
                   id: '02',
                    name: '苹果8',
                    price: '2888',
                    fase:10
                }, {
                    id: '03',
                    name: '苹果8',
                    price: '2888',
                    fase:10
                }, {
                    id: '04',
                    name: '苹果8',
                    price: '2888',
                    fase:10
                }],
                //新增的商品暂时放在这里
                addgForm:{
                    id:'',
                    name:'',
                    price:"",
                    fase:''
                    },
                    page: {
                    pageSize: 10, //每页条数,  默认10条
                    totalRecords: 0, //总条数
                    totalPages: 0, //总页数
                  pageNum:0
                },
                editgForm:{
                    id:'',
                    name:'',
                    price:"",
                    fase:''
                },
                addGoodsForm:false,
                editGoodsForm:false,
                editinex:0,
                //查询输入框数据
                input: '',
                //导航条默认选项
                activeIndex: '1',
                activeIndex2: '1'
            }
        },
        mounted:{
            this.page.totalRecords=this.goodses.length;
            this.page.totalPages=this.page.totalRecords/this.page.totalPages+1;
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            indexMethod(index) {
                return index;
              
            },
            add(){
                this.addGoodsForm=true
            },
            goodseAdd:function(){
                //   axios.post(url,{this.addgForm})
                // .then(res=>{})
                // .catch(res=>{})
                // 增加成功
                // this.goodses[goodses.length+1].
               this.goodses.push(this.addgForm)
                this.addGoodsForm=false;
                // 增加失败
                // this.$message.error("添加失败");
                
            },
            closeDialog(){
                  this.addGoodsForm=false;
                    this.editGoodsForm=false;
            },
            edi(index){
                this.editinex=index
                this.editgForm=this.goodses[index]
                this.editGoodsForm=true
                           },
            goodseEdit(){
                this.goodses[this.editinex]=this.editgForm
                this.editGoodsForm=false
            },
          del(index){
               this.$confirm('此操作将永久删除商品 ' + this.goodses[index].name + ', 是否继续?', '提示', { type: 'warning' })
               .then(()=>{
                   this.goodses.splice(index,1)
                   this.$message.info('删除成功!');
               })
               .catch(()=>{
                     this.$message.info('已取消操作!');
               })
          },
        //   qdel(){
        //          this.$confirm('此操作将永久删除所有商品 , 是否继续?', '提示', { type: 'warning' })
        //        .then(()=>{
        //            this.goodses.splice(0,this.goodses.length)
        //            this.$message.info('删除成功!');
        //        })
        //        .catch(()=>{
        //              this.$message.info('已取消操作!');
        //        })
        //   }
        qdel(){
                 this.$confirm('此操作将永久删除所选商品,共有 , 是否继续?', '提示', { type: 'warning' })
               .then(()=>{
                   this.goodses.splice(0,this.goodses.length)
                   this.$message.info('删除成功!');
               })
               .catch(()=>{
                     this.$message.info('已取消操作!');
               })
        },
     // 每页显示多少条数据
sizeChange(val) {
  this.page.pageSize = val;
  this.init();
},
//翻页
currentChange(val) {
  this.page.pageNum=val-1;
  console.log(this.page.pageNum);
  this.init();
},
}
</script>

<style>

</style>